<template>
  <view>
    <!-- 搜索栏 -->
    <view class="search-wrap">
      <u-search
        :actionStyle="{
          background: '#eb4450',
          color: 'white',
          lineHeight: '61rpx',
          borderRadius: '8rpx',
          fontSize: '25rpx',
        }"
        height="61rpx"
        placeholder="日照香炉生紫烟"
        v-model="keyword"
        @search="submitSearch"
        @custom="submitSearch"
      ></u-search>
    </view>

    <!-- 空状态 -->
    <u-empty v-if="goods.length === 0" mode="search" marginTop="200rpx">
    </u-empty>

    <!-- 商品列表 -->
    <view class="list">
      <view class="item" v-for="item in goods" :key="item.goods_id">
        <image class="left" :src="item.goods_small_logo"></image>
        <view class="right u-line-2">{{ item.goods_name }}}</view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    onLoad() {
      // 偷个懒 默认进来就搜索
      this.keyword = "小米";
      this.submitSearch();
    },
    data() {
      return {
        keyword: "",
        goods: [],
      };
    },
    methods: {
      async submitSearch() {
        console.log("用户进行了搜索", this.keyword);
        const { goods } = await uni.$u.http.get("/goods/search", {
          params: {
            query: this.keyword,
          },
        });
        this.goods = goods;
      },
    },
  };
</script>

<style lang="scss" scoped>
  .search-wrap {
    padding: 15rpx 18rpx;
  }
  .list {
    .item {
      display: flex;
      padding: 13rpx 26rpx;
      .left {
        width: 191rpx;
        height: 191rpx;
      }
      .right {
        flex: 1;
        line-height: 40rpx;
        font-size: 24rpx;
        height: 80rpx;
        padding-left: 29rpx;
      }
    }
  }
</style>